<script src="./page.js"></script>
<style lang="less" rel="stylesheet/less" scoped>
    @import "./page.less";
</style>

<template>
    <div class="card-panel">
        <el-row>
            <el-col :span="12">
                <el-form :model="form" label-width="120px">
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="选择企业" class="item">
                                <el-select v-model="value1" class="select-input" :size="sizeModel" @change="selectChange">
                                    <el-option 
										v-for="item in selectCompany"
										:key="item.id"
										:label="item.name"
										:value="item.id"
									></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <!-- <el-form-item label="账户余额" class="item">
                                <el-input v-model="form.balance" class="select-input" disabled></el-input>
                            </el-form-item> -->
                            <el-form-item label="账单列表" class="item">
                                <el-select v-model="unpaidBillsSelected" class="select-input" :size="sizeModel" @change="setTotalPrice" multiple>
                                    <el-option 
										v-for="item in unpaidBills"
										:key="item.id"
										:label='(item.name + " | " +  formatThisMoney(item.disable_balance))'
										:value="item.id"
									>
										<span>{{ item.name }}</span>
										<span>&nbsp;|&nbsp;</span>
										<span>{{ item.disable_balance | filterMoney }} 元</span>
									</el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-col>
                            <el-form-item label="总金额" class="item">
                                <el-input v-model="totalCount" class="select-input color-green" disabled></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row type='flex' align="bottom">
                        <el-button type="primary" @click="submit" class="btn-block submit-btn green-btn">确认金额</el-button>
                    </el-row>
                </el-form>
            </el-col>
            <!-- <el-col :span="12">
                <el-upload
                    class="upload-demo"
                    drag
                    action="/biz/import_excel"
                    multiple>
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                    <div class="el-upload__tip" slot="tip">
                        <span>支持pdf和图片文件上传</span>
                    </div>
                </el-upload>
                <p class="result">上传失败，轻联系客服</p>
            </el-col> -->
        </el-row>
        
       

        <div class="invest-result">
            <el-dialog
                :visible.sync="isShowDialog"
                width="400px"
                center
                >
                <template slot="title">
                    <div v-if="isSuccess">
                        <i class="el-icon-success"></i>
                        <span>充值成功</span>
                    </div>
                    <div v-else>
                        <i class="el-icon-error"></i>
                        <span>充值失败</span>
                    </div>
                </template>
                <div class="dialog-content">
                    <div class="account-info">
                        <p class="info-title">滴滴广告有限公司运营账号</p>
                        <div class="info-detail">
                            <span>余额</span>
                            <span class="color-blue">{{totalCount | filterMoney}}<span class="font-small">元</span></span>
                        </div>
                    </div>
                    <div class="text-right">
                        <el-button type="primary" @click="isShowDialog=false" class="confitm-btn">确认</el-button>
                    </div>
                </div>
            </el-dialog>
        </div>
        <el-dialog
            :visible.sync="isShowRecords"
            width="70%"
            >
            <div class="dialog-content-record">
                <el-table :data="recordList" stripe>
                    <el-table-column label="外部账单编号" prop="balanceId" show-overflow-tooltip></el-table-column>
                    <el-table-column label="充值金额" prop="investCount">
                        <template slot-scope="scope">
                            <div>
                                <span>{{scope.row.investCount|filterMoney}}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="充值人" prop="investPerson"></el-table-column>
                    <el-table-column label="充值前金额" prop="investCountBefore">
                        <template slot-scope="scope">
                            <div>
                                <span>{{scope.row.investCountBefore|filterMoney}}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="充值后金额" prop="investCountAfter">
                        <template slot-scope="scope">
                            <div>
                                <span>{{scope.row.investCountAfter|filterMoney}}</span>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="充值时间" prop="investTime"></el-table-column>
                </el-table>
                <el-pagination v-show="recordTotal>0" style="margin-top:15px;" layout="prev, pager, next" :total="recordTotal" :page-size="record.size" :current-page="record.page" @current-change="pageSearchRecord" @size-change="handleSizeChangeRecord"></el-pagination>
            </div>
        </el-dialog>
    </div>
</template>
